<template>
  <div class="page_container">
    <PageTitle />
    <ScrollContainer>
      <Form
        :data="opts"
        :rows="5"
        :cols="2"
        label-width="100px"
        :mergeRow="[[1,1,1],[3,1,1]]"
      >
        <template #type_source="{tab}">
          <div class="slot_item">
            <span class="label_css required">文章类型：</span>
            <el-select
              class="flex_item"
              v-tab="{index: 3, max:tab.max}"
              v-model="formObj.type"
              placeholder="请选择文章类型"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="slot_item">
            <span class="label_css required">文章来源：</span>
            <el-input
              v-tab="{index: 4, max:tab.max}"
              v-model="formObj.source"
              placeholder="请输入文章来源"
            ></el-input>
          </div>
        </template>
        <template #img>
          <PhotoUpload
            @success="file => formObj.image = file.id"
            @remove="() => formObj.image = 0"
            :tip="tipContent"
            tipWidth="252px"
            :fileList="fileObj"
            class="upload_wrap"
          />
        </template>
        <template #contents>
          <Editor
            :height="470"
            :content="formObj.contents"
            @change="e => formObj.contents = e"
            placeholder="请输入文章内容"
          />
        </template>
      </Form>

      <template #btns>
        <el-button @click="confirm" type="primary" round>
          确认
        </el-button>
        <el-button @click="cancel" round>
          取消
        </el-button>
      </template>
    </ScrollContainer>
  </div>
</template>

<script>
import {
  getInformationArticleDetail,
  editInformationArticle
} from '@/api/home/information/informationArticle.js';

import formMixin from './js/formMixin';
export default {
  name: 'InformationArticleEdit',
  mixins: [formMixin],
  data() {
    return {
      detailFn: getInformationArticleDetail,
      editFn: editInformationArticle,
      fileObj: {},
      cancelMessage: {
        msg: '确定取消修改资讯文章吗？',
      },
      cancelNavTo: {
        to: {
          name: 'InformationArticle',
        },
        from: this.$route.params.from,
        params: {
          removeTagViews: ['InformationArticleEdit']
        }
      },
      confirmNavTo: {
        name: 'InformationArticleDetail',
        params: {
          removeAliveRoters: ['InformationArticle', 'InformationArticleDetail'],
          removeTagViews: ['InformationArticleEdit']
        }
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.label_css {
  width: 100px;
}
</style>
